<template>
  <el-dialog title="添加模块"
             :visible.sync="addVisible"
             width="80%"
             @close="dialogClose">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true"
                 :model="modelForm">
          <el-form-item label="所属页面">
            <el-select v-model="modelForm.type"
                       placeholder="请选择"
                       @change="getModelData">
              <el-option v-for="item in pageTypeData"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模块名称">
            <el-input v-model="modelForm.name"
                      placeholder="请输入模块名称"
                      @keyup.enter.native="getModelData"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getModelData">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table :data="addModelData"
                  @selection-change="handleSelectionChange"
                  height="400"
                  highlight-current-row>
          <el-table-column type="selection"
                           width="55"></el-table-column>
          <el-table-column prop="page_tmp_name"
                           label="页面"
                           align="center"></el-table-column>
          <el-table-column prop="moudle_name"
                           label="模块名称"
                           width="120"></el-table-column>
          <el-table-column prop="moudle_type"
                           label="模块类型"
                           :formatter="handleModuleTypeFilter"
                           width="120"></el-table-column>
          <el-table-column prop="router"
                           label="路由地址"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="h"
                           label="高度"></el-table-column>
          <el-table-column prop="w"
                           label="宽度"></el-table-column>
          <el-table-column prop="flush_time"
                           label="刷新时间"></el-table-column>
        </el-table>
        <div style="margin-top: 20px;float: right;">
          <el-button @click="addVisible=false">返回</el-button>
          <el-button type="primary"
                     @click="getSureAddModule">确认</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { pageComCustomApi } from '@/services/SystemSetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  props: {
    dialogVisible: Boolean,
    data: Object,
    pageTypeId: String
  },
  data () {
    return {
      addModelData: [],
      pageTypeData: [],
      modelForm: {
        type: '',
        name: ''
      },
      addVisible: false,
      addModuleParameter: {},
      multipleSelection: [],
      pageTypeIds: 0
    }
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.addVisible = newval
      this.getModelData()
    },
    data (newval, oldval) {
      this.addModuleParameter = newval
    },
    pageTypeId (newval, oldval) {
      if (newval != '') {
        this.pageTypeIds = newval
      } else {
        this.pageTypeIds = 0
      }
    }
  },
  methods: {
    // 获取模块列表
    getModelData () {
      if (this.addVisible == true) {
        pageComCustomApi
          .getAddModuleList({
            params: {
              module_name: this.modelForm.name,
              instance_moudles: this.pageTypeIds,
              page_tmp_id: this.addModuleParameter.page_tmp_id
            }
          })
          .then(
            res => {
              this.addModelData = res.data
            },
            err => {
              console.log(err)
            }
          )
      }
    },

    getAddData () { },
    dialogClose () {
      this.$emit('update:dialogVisible', false)
    },
    // 获取页面类型
    getPageTypeList () {
      pageComCustomApi
        .getPageTypeList({
          params: {
            codeType: 'pageCode'
          }
        })
        .then(res => {
          this.pageTypeData = res.data.data
        })
    },
    // 模块选择
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 确认添加
    getSureAddModule () {
      pageComCustomApi
        .getSureAddModule({
          data: {
            instance_type: 4,
            rela_id: this.addModuleParameter.rela_id,
            page_tmp_id: this.addModuleParameter.page_tmp_id,
            instance_moudle: JSON.stringify(this.multipleSelection)
          }
        })
        .then(res => {
          if (res.code === 0) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.$emit('backStatus', 'success')
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
    },
    // 获取模块类型列表
    getModuleTypeList () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: 'pageMoudleType'
          }
        })
        .then(
          res => {
            if (res.data) {
              this.moduleTypeData = res.data.list
            }
          },
          err => {
            console.log(err)
          }
        )
    },
    handleModuleTypeFilter (row) {
      var moduleType
      this.moduleTypeData.filter(item => {
        if (item.value == row.moudle_type) {
          moduleType = item.name
        }
      })
      return moduleType
    }
  },
  created () {
    this.getModelData()
    this.getModuleTypeList()
  }
}
</script>
